<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // Model数据模型
        let msg = "Hello MVVM";
        window.onload = function(){
            let s1 = document.getElementById("s1");
            let inText = document.getElementById("inText");

            // Model --> View
            s1.innerHTML = msg;
            inText.value = msg;

            // 监听input元素,当用户在文本框中更改内容时触发事件
            inText.oninput = function(){
                // View --> Model
                msg = inText.value;
                // 更新span中的数据
                s1.innerHTML = msg;
            }
        }
        
    </script>
</head>
<body>
    <div>
        <span id="s1"></span><br>
        <input type="text" id="inText">
    </div>
    
</body>
</html>